<template>
  <div>
    <header>
      <van-nav-bar title="回车登记" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
      <van-cell-group class="timer">
        <van-cell title="回车时间" :value="$route.query.time" center />
        <van-cell
          @click="timeShow = true"
          title="异常时间"
          :is-link="cell.timeFlag"
          :value="cell.timeValue"
          center
        />
        <van-action-sheet v-model="timeShow">
          <van-datetime-picker
            v-model="currentDate"
            title="选择时间"
            :formatter="formatter"
            confirm-button-text="完成"
            @confirm="onConfirm"
          />
        </van-action-sheet>
        <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
      </van-cell-group>
      <div class="car-illegal" style="margin-top: 15px">
        <van-cell title="车辆违章">
          <template #default>
            <van-radio-group
              v-model="illegalradio"
              style="display: flex; justify-content: end"
            >
              <van-radio
                name="1"
                checked-color="#ef4f3f"
                style="margin-right: 10px"
                >是</van-radio
              >
              <van-radio name="2" checked-color="#ef4f3f">否</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <div v-if="illegalradio == '1'" class="illegal-bottom">
          <van-grid :column-num="3">
            <van-grid-item>
              <template #default>
                <div
                  style="padding: 0 0 15px 15px; width: 330px; padding-right: 0"
                >
                  <p style="font-size: 14px">违章类型</p>
                  <div style="margin-top: 15px">
                    <span
                      v-for="(item, index) in illegalType"
                      :key="index"
                      :class="{ tag: true, active: index == illegalIndex }"
                      @click="illegalIndex = index"
                      :style="{ marginRight: index % 3 == 2 ? '0' : '15px' }"
                    >
                      <p>{{ item }}</p>
                    </span>
                  </div>
                </div>
                <div
                  style="padding: 0 0 15px 15px; width: 330px; padding-right: 0"
                >
                  <p style="font-size: 14px">罚款金额</p>
                  <div style="margin-top: 15px">
                    <span
                      v-for="(item, index) in fine"
                      :key="index"
                      :class="{ tag: true, active: index == fineIndex }"
                      @click="fineIndex = index"
                      :style="{ marginRight: index % 3 == 2 ? '0' : '15px' }"
                    >
                      <p>{{ item }}</p>
                    </span>
                  </div>
                </div>
                <div style="padding: 0 0 15px 15px; width: 330px">
                  <p style="font-size: 14px">扣分</p>
                  <div style="margin-top: 15px">
                    <span
                      v-for="(item, index) in points"
                      :key="index"
                      :class="{ tag: true, active: index == pointsIndex }"
                      @click="pointsIndex = index"
                      :style="{ marginRight: index % 3 == 2 ? '0' : '15px' }"
                    >
                      <p>{{ item }}</p>
                    </span>
                  </div>
                </div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="car-fault" style="margin-top: 15px">
        <van-cell title="车辆违章">
          <template #default>
            <van-radio-group
              v-model="faultradio"
              style="display: flex; justify-content: end"
            >
              <van-radio
                name="1"
                checked-color="#ef4f3f"
                style="margin-right: 10px"
                >是</van-radio
              >
              <van-radio name="2" checked-color="#ef4f3f">否</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <div v-if="faultradio == '1'">
          <van-grid :column-num="3">
            <van-grid-item>
              <div
                style="padding: 0 0 15px 15px; width: 330px; padding-right: 0"
              >
                <p style="font-size: 14px">故障类型</p>
                <div style="margin-top: 15px">
                  <span
                    v-for="(item, index) in faultType"
                    :key="index"
                    :class="{ tag: true, active: index == faultIndex }"
                    @click="faultIndex = index"
                    :style="{ marginRight: index % 3 == 2 ? '0' : '15px' }"
                  >
                    <p>{{ item }}</p>
                  </span>
                </div>
              </div>
              <div style="padding: 0 0 15px 15px; width: 330px">
                <van-field
                  v-model="faultDesc"
                  rows="5"
                  autosize
                  type="textarea"
                  maxlength="50"
                  placeholder="请简单描述故障"
                  show-word-limit
                  style="background-color: #f4f4f4; border-radius: 10px"
                />
              </div>
              <div style="padding: 0 0 15px 15px; width: 330px">
                <p style="font-size: 14px">请拍照</p>
                <div style="margin-top: 15px">
                  <van-uploader v-model="faultFile" multiple :max-count="1" />
                </div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="car-accident" style="margin-top: 15px">
        <van-cell title="车辆违章">
          <template #default>
            <van-radio-group
              v-model="accidentradio"
              style="display: flex; justify-content: end"
            >
              <van-radio
                name="1"
                checked-color="#ef4f3f"
                style="margin-right: 10px"
                >是</van-radio
              >
              <van-radio name="2" checked-color="#ef4f3f">否</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <div v-if="accidentradio == '1'">
          <van-grid :column-num="3">
            <van-grid-item>
              <div
                style="padding: 0 0 15px 15px; width: 330px; padding-right: 0"
              >
                <p style="font-size: 14px">事故类型</p>
                <div style="margin-top: 15px">
                  <span
                    v-for="(item, index) in accidentType"
                    :key="index"
                    :class="{ tag: true, active: index == accidentIndex }"
                    @click="accidentIndex = index"
                    :style="{ marginRight: index % 3 == 2 ? '0' : '15px' }"
                  >
                    <p>{{ item }}</p>
                  </span>
                </div>
              </div>
              <div style="padding: 0 0 15px 15px; width: 330px">
                <van-field
                  v-model="accidentDesc"
                  rows="5"
                  autosize
                  type="textarea"
                  maxlength="50"
                  placeholder="请简单描述故障"
                  show-word-limit
                  style="background-color: #f4f4f4; border-radius: 10px"
                />
              </div>
              <div style="padding: 0 0 15px 15px; width: 330px">
                <p style="font-size: 14px">请拍照</p>
                <div style="margin-top: 15px">
                  <van-uploader
                    v-model="accidentFile"
                    multiple
                    :max-count="1"
                  />
                </div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </main>
    <footer>
      <van-button round>交车</van-button>
    </footer>
  </div>
</template>
<script>
export default {
  name: "CarBack",
  data() {
    return {
      timeShow: false,
      currentDate: new Date(),
      cell: {
        timeFlag: true,
        timeValue: "",
      },
      illegalradio: "2",
      faultradio: "2",
      accidentradio: "2",
      illegal: "",
      illegalType: ["闯红灯", "无证驾驶", "超载", "酒后驾驶", "超速驾驶"],
      fine: ["0元", "100元", "200元", "300元", "500元", "1000元", "2000元"],
      points: ["0分", "1分", "2分", "3分", "6分", "12分"],
      faultType: [
        "启动困难",
        "不着车",
        "漏油",
        "漏水",
        "照明失灵",
        "有异响",
        "排烟异常",
        "温度异常",
        "其它",
      ],
      accidentType: [
        "直行事故",
        "追尾事故",
        "超车事故",
        "左转弯事故",
        "右转弯事故",
        "弯道事故",
        "坡道事故",
        "会车事故",
        "其它",
      ],
      faultDesc: "",
      faultFile: [],
      accidentDesc: "",
      accidentFile: [],
      accidentIndex: 0,
      faultIndex: 0,
      pointsIndex: 0,
      illegalIndex: 0,
      fineIndex: 0,
    };
  },
  created() {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm(val) {
      console.log(val);
      this.cell.timeValue = new Date(val).toLocaleString();
      // this.cell.timeFlag = false;
      this.timeShow = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
  },
};
</script>
<style lang="less" scoped>
.van-hairline--bottom::after {
  border: none;
}
header {
  padding-top: 43px;
  background-color: #fff;
  width: 100vw;
  height: 93px;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #000;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
main {
  margin-top: 93px;
  margin-bottom: 84px;
  background-color: #f4f4f4;
  width: 100vw;
  height: 100vh;
  padding: 15px;
  height: 490px;
  overflow: auto;
  .timer {
    width: 345px;
    height: 120px;
    border-radius: 10px;
    margin-bottom: 15px;
    .van-cell {
      height: 60px;
    }
  }
}
.tag {
  display: inline-block;
  width: 95px;
  height: 40px;
  background: #f4f4f4;
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  margin-bottom: 15px;
  font-size: 14px;
}
.tag.active {
  background: #ffe0dd;
  border: 1px solid #ef4f3f;
  color: #ef4f3f;
}
footer {
  position: fixed;
  left: 0;
  padding-bottom: 33px;
  bottom: 0;
  width: 100vw;
  height: 83px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-button {
    margin-top: 10px;
    width: 207px;
    height: 50px;
    background-color: #ef4f3f;
    color: #fff;
  }
}
</style>
